<template>
  <div class="login-container">
    <div class="input-cell">
      <input
        v-model="username"
        class="login-input"
        placeholder="请输入手机号"
        type="number"
      />
      <div class="login-icon">
        <img src="@/assets/登录-assets/telephone.png" alt="" />
      </div>
    </div>
    <div class="input-cell">
      <input
        v-model="captcha"
        class="login-input"
        placeholder="请输入验证码"
        type="number"
      />
      <button
        @click="getCaptcha"
        :class="{ 'captcha-btn': true, disabled: captchaStatus }"
        :disabled="captchaStatus"
      >
        <span v-if="!captchaStatus">获取验证码</span>
        <yd-countdown
          v-else
          time="59"
          format="{%s}"
          timetype="second"
          :callback="
            () => {
              captchaStatus = false;
            }
          "
        ></yd-countdown>
      </button>
      <div class="login-icon">
        <img src="@/assets/登录-手机验证码-assets/captcha.png" alt="" />
      </div>
    </div>
    <div v-if="this.$route.query.secret" class="input-cell">
      <input
        v-model="invite_code"
        class="login-input"
        placeholder="请输入邀请码"
      />
      <div class="login-icon"></div>
    </div>
    <button @click="login" class="main-btn" :style="{background: mainColor}">
      {{ this.$route.query.secret ? "绑 定" : "登 录" }}
    </button>
  </div>
</template>

<script>
import { login, getCaptcha } from "@/api/login";
import { mapState, mapActions } from "vuex";
import "./login-style.less";
import { getUserInfo } from "@/api/profile";
export default {
  data() {
    return {
      username: null,
      captcha: null,
      captchaStatus: false,
      invite_code: null
    };
  },
  computed: {
    ...mapState({
      menu: state => state.app.menu,
       mainColor: state => state.app.mainColor,
    })
  },
  methods: {
    ...mapActions(["handleLogin", "setUserInfo"]),
    getCaptcha() {
      if (!this.username) {
        this.$dialog.toast({
          mes: "请填写手机号",
          timeout: 1500,
          icon: "error"
        });
      } else {
        getCaptcha(this.username).then(res => {
          if (res.status === 200) {
            this.captchaStatus = true;
          }
        });
      }
    },
    login() {
      let username = this.username;
      let captcha = this.captcha;
      this.handleLogin({
        username,
        captcha,
        isCaptcha: true,
        invite_code: this.invite_code,
        secret: this.$route.query.secret
      }).then(res => {
        if (res) {
          getUserInfo().then(res => {
            if (res.status === 200) {
              this.setUserInfo(res.data.data);
            }
          });
          this.$dialog.toast({
            mes: "登录成功！",
            timeout: 1500,
            callback: () => {
              if (
                localStorage.getItem("ct_invite_code") &&
                localStorage.getItem("ct_good_id")
              ) {
                this.$router.replace({
                  path: "/item-detail/" + localStorage.getItem("ct_good_id"),
                  query: {
                    invite_code: localStorage.getItem("ct_invite_code")
                  }
                });
              } else {
                this.$router.replace(this.menu[0].link);
              }
              localStorage.removeItem("ct_invite_code");
              localStorage.removeItem("ct_good_id");
            }
          });
        }
      });
    }
  },
  created() {
    this.invite_code = this.$route.query.invite_code
      ? this.$route.query.invite_code
      : null;
  }
};
</script>

<style lang="less" scoped>
.login-container {
  .main-btn {
    margin-top: 3.05rem;
  }
}
</style>
